<template>
  <!-- 更多和轮播图组件 -->
  <div class="more-content">
    <div class="more-top">
      <p class="green">▍</p>
      <p class="guess">{{ title }}</p>
      <p class="more">更多>></p>
    </div>
    <br />
    <br />
    <div class="more-bottom">
      <!-- 轮播图 -->
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide>
          <img src="../assets/images/picture_GL01.png" alt="" />
        </swiper-slide>
        <swiper-slide>
          <img src="../assets/images/picture_GL02.png" alt="" />
        </swiper-slide>
        <swiper-slide>
          <img src="../assets/images/picture_GL03.png" alt="" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "swiper/vue";

export default {
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
          freeModeMomentum: false,
        },
      },
    };
  },
  props: {
    title: {
      type: String,
      default: "",
    },
  },
};
</script>

<style lang="less" scoped>
.green {
  color: #7dd193;
  margin: 0.15rem 0.2rem;
  margin-right: 0;
  font-size: 0.2rem;
  float: left;
}
.guess {
  float: left;
  margin: 0.1rem 0.2rem;
  margin-left: 0;
  font-size: 0.2rem;
  color: #333333;
}
.more {
  float: right;
  margin: 0.1rem 0.26rem;
  font-size: 0.2rem;
  color: #333333;
}
.more-bottom {
  float: left;
}
.more-bottom img {
  width: 3rem;
  height: 2.3rem;
  float: left;
  margin: 0.1rem;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>